<template>
	<view class="page-content">
		<!-- 轮播 -->
		<view class="banner">
			<swiper :indicator-dots="true"
					:autoplay="true" 
					indicator-color="rgba(255,255,255, .5)"
					indicator-active-color="#ff372b"
					:interval="3000" 
					:duration="500">
				<swiper-item v-for="(item,index) in swiper" :key="index">
					<view class="item">
						<image :src="item.pic" class="img"></image>
						<view class="tag">
							{{item.typeTitle}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 入口 -->
		<view class="main-bar flex-box">
			<view class="flex-item" v-for="(item,index) in contentBar" :key="index">
				<image :src="'../../static/image/index/t_'+(index+1)+'.png'" class="img"></image>
				<view>
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 推荐歌单 -->
		<view class="song-list">
			<view class="tit-bar">
				推荐歌单
				<view class="more fr">
					歌单广场
				</view>
			</view>
			<scroll-view class="scroll-view" scroll-x>
				<view class="item" v-for="(item,index) in recommendSongs" :key="item.id">
					<image class="img" :src="item.picUrl" mode=""></image>
					<view class="desc ellipsis">
						{{item.name}}
					</view>
					<view class="count">
						{{item.playCount}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 新碟新歌 -->
		<view class="song-list">
			<view class="switch-line flex-box">
					<view class="flex-box">
						<view class="switch-item" :class="{on : newType==1}" @click="switchTab(1)">
							新碟
						</view>
						<view class="switch-item" :class="{on : newType==2}" @click="switchTab(2)">
							新歌
						</view>
					</view>
					<template v-if="newType==1">
						<view class="more">
							更多新碟
						</view>
					</template>
					<template v-if="newType==2">
						<view class="more">
							更多新歌
						</view>
					</template>
			</view>
			<scroll-view class="scroll-view" scroll-x>
				<view class="item" v-for="(item,index) in latestAlbum" :key="item.id">
					<image class="img" :src="item.picUrl"></image>
					<view class="desc ellipsis">
						{{item.name}}
					</view>
					<view class="desc ellipsis c9">
						{{item.artist.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 精选视频 -->
		<view class="video-list song-list">
				<view class="tit-bar">
					精选视频
					<view class="more fr">
						更多
					</view>
				</view>
				<view class="video-item" v-for="(item, index) in relatedVideo" :key="index">
					<image :src="item.coverUrl" mode="" class="img"></image>
					<view class="desc ellipsis">
						{{item.title}}
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import {apiGetBanner, apiGetRecommendSongs, apiGetTopAlbum, apiGetRelatedVedio} from '../../apis/index.js'
	export default {
		data() {
			return {
				swiper: [],
				contentBar: [                
					{name : '每日推荐'},
					{name : '歌单'},
					{name : '排行榜'},
					{name : '电台'},
					{name : '直播'},
				],
				recommendSongs: [],
				newType: 1,                    //新碟新歌类别  1--第一个  2--第二个
				latestAlbum: [],               //存储新碟新歌
				relatedVideo: []
			}
		},
		components: {
			
		},
		onLoad() {
			this.getBanner(),
			this.getRecommendSongs()
			this.getLatestAlbum()
			this.getRelatedVideo()
		},
		methods: {
			async getBanner() {
				const result = await apiGetBanner({type:2})
				// console.log(result)
				this.swiper = result.banners
			},
			async getRecommendSongs() {
				const result = await apiGetRecommendSongs(10)
				// console.log(result)
				// 格式化播放量数据
				const formatCount = data=>{
					let tmp = data;
					if (data > 10000) {
						tmp = (parseInt(data/10000) + '万');
					}
					return tmp
				}
				this.recommendSongs = result.result
				//格式化
				this.recommendSongs.forEach(item => {
					item.playCount = formatCount(item.playCount);
				})
			},
			switchTab(type) {
				this.newType = type;
				// 设定开始start和结束end的位置
				let temp = {
					s: type == 1 ? 0 : 3,
					e: type == 1 ? 3 : 6
				}
				this.latestAlbum = this.latestTempAlbum.slice(temp.s, temp.e);
			},
			//新碟新歌  把前3首歌--新碟  后3首--新歌
			async getLatestAlbum() {
				const result = await apiGetTopAlbum()
				//将所有的数据暂存在临时变量中
				this.latestTempAlbum = result.albums;
				//取前3个作为第一类的数据展示
				this.latestAlbum = result.albums.slice(0, 3);
			},
			async getRelatedVideo() {
				const result = await apiGetRelatedVedio('89ADDE33C0AAE8EC14B99F6750DB954D')
				this.relatedVideo = result.data
			}
		}
	}
</script>

<style lang="scss">
page {
	color: #1a1a1a;
	font-size: 24rpx;
}
.dpn{
	display: none;
}
.top-img {
	width: 50rpx;
	height: 50rpx;
	margin-top: 10rpx;
}
.top-search {
	width: 460rpx;
	/* #ifdef MP-WEIXIN */
	width: 460rpx;
	margin-left:-60rpx;
	/* #endif */
	height: 72rpx;
	margin-right: 24rpx;
	border-radius: 72rpx;
	color: #c6c6c6;
	background: #f7f7f7;
	align-items: center;
	justify-content: center;
	.search-icon {
		width: 28rpx;
		height: 29rpx;
		margin-right: 12rpx;
	}
}
.page-content {
	overflow: auto;
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0px;
	/* #ifdef H5 || MP-WEIXIN */
	top: 44px;
	/* #endif */
}
.banner {
	width: 100%;
	height: 268rpx;
	margin: 30rpx auto 30rpx;
	.swiper {
		height: 268rpx;
	}
	.item {
		position: relative;
		display: block;
		width: 686rpx;
		height: 268rpx;
		margin: 0 auto;
		border-radius: 14rpx;
		overflow: hidden;
	}
	.img {
		display: block;
		width: 100%;
		height: 268rpx;
	}
	.tag {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 34rpx;
		padding: 0 14rpx;
		line-height: 34rpx;
		color: #fff;
		background: #43a5f0;
		z-index: 10;
		border-top-left-radius: 14rpx;
	}
}

.main-bar {
	padding-bottom: 22rpx;
	text-align: center;
	line-height: 70rpx;
	color: #666;
	border-bottom: 1rpx solid #e6e6e6;
	.img {
		display: block;
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto;
	}
	.flex-item {
		position: relative;
		.date {
			position: absolute;
			left: 50%;
			top: 40rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #ff392d;
			transform: translateX(-50%) scale(0.8);
		}
	}
}
.main-bar.flex-box{
	display: flex;
	justify-content: space-around;
}

.song-list {
	padding-left: 32rpx;
	.tit-bar {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 110rpx;
	}

	.more {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 32rpx;
		color: #333;
		font-weight: 400;
		font-size: 24rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 50rpx;
	}
	.switch-line {
		justify-content: space-between;
		color: #999;
		.flex-box {
			line-height: 110rpx;
			width: 300rpx;
		}
		.switch-item {
			font-weight: 600;
			&:first-child {
				width: 80rpx;
			}
			&:last-child {
				padding-left: 22rpx;
			}
			&.on {
				color: #333;
				font-size: 34rpx;
			}
		}
	}
	.scroll-view {
		width: 100%;
		white-space: nowrap;
	}

	.item {
		position: relative;
		display: inline-block;
		width: 218rpx;
		padding-bottom: 16rpx;
		margin-right: 16rpx;
		line-height: 34rpx;
		&:before {
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 40rpx;
			z-index: 2;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
		}
		&.video {
			width: 450rpx;
		}
		.img {
			display: block;
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}
	.count {
		position: absolute;
		top: 0;
		right: 0;
		padding-left: 25rpx;
		line-height: 34rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 10;
		background: url()
			no-repeat;
		background-size: 25rpx 25rpx;
		transform: scale(0.8);
	}
}
.video-list {
	padding-left: 0;
	.tit-bar {
		padding-left: 32rpx;
	}
	.video-item {
		width: 686rpx;
		height: 490rpx;
		margin: 0 auto;
		background: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
	}
	.img {
		display: block;
		width: 686rpx;
		height: 390rpx;
		background: #eee;
	}
	.desc {
		padding-left: 40rpx;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 100rpx;
	}
}

/*
	 *平台差异化处理的代码可以放在底部，这样有利于集中管理
	*/
/* #ifdef MP-WEIXIN */
.banner {
	margin-top: 60rpx;
}
/* #endif */
</style>